<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <table border="1" cellspacing="0" style="width: 500px; height: 200px; text-align: center;">
        <thead>
            <tr>
                <th><input class="shou" type="checkbox" style="vertical-align: middle; ">全选</th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="ck" type="checkbox"></td>
                <td>小米手机</td>
                <td>小米</td>
                <td>￥1999</td>
            </tr>
            <tr>
                <td><input class="ck" type="checkbox"></td>
                <td>小米净水器</td>
                <td>小米</td>
                <td>￥4999</td>
            </tr>
            <tr>
                <td><input class="ck" type="checkbox"></td>
                <td>小米电视</td>
                <td>小米</td>
                <td>￥5999</td>
            </tr>
        </tbody>
    </table>

    <script>
        const input = document.querySelector('.shou')
        const inputs = document.querySelectorAll('.ck')
        input.addEventListener('click', function () {
            for (let i = 0; i < inputs.length; i++) {
                //this.checked 大复选框，  inputs[i].checked 小复选框
                //只要大复选框checked值为true 就会自动把所有小复选框选中
                inputs[i].checked = this.checked
            }
        })

        //遍历所有小复选框
        for (let i = 0; i < inputs.length; i++) {
            //注册每一个小复选框的点击事件 事件对象
            inputs[i].addEventListener('click', function () {
                //.ck:checked获取每个被选中的复选框 里面有length属性
                let checkeds = document.querySelectorAll('.ck:checked')
                // console.log(inputs.length);//得到小复选框的总长度
                // console.log(inputs.length === checkeds.length);//判断值：true , false
                let val = inputs.length === checkeds.length
                input.checked = val
            })

        }
    </script>
</body>

</html>